<template>
  <div class="page-result">
    <div class="text-right">
      <div class="inline-block font-size-14 bg-blue btn-radius text-white" @click="showRule">
        游戏规则
      </div>
    </div>
    <h2>第一期国学测试结果:</h2>
    <!--<div class="tool-cards flex-horizon">-->
      <!--<toolCard class="card-item" v-for="item in toolCards" :key="item.name" :count="item.count" :type="item.type"></toolCard>-->
    <!--</div>-->
    <div class="question-title">
      您一共答对了 {{rightCount}} 题，获得 {{score}} 积分。{{title}}
    </div>
    <!--<div class="image-width margin-vertical-10">-->
      <!--<img src="/static/images/1.jpg" alt="">-->
    <!--</div>-->
    <div class="btns flex-horizon">
      <div class="btn" @click="clickContinue">继续游戏</div>
      <div class="btn" @click="clickScoreCash">积分兑奖</div>
    </div>
    <div class="inputInfo" v-show="isShowInput">
      <h3>请输入您的个人信息方便后续兑奖</h3>
      <div class="form-line">
        <p>请输入您的姓名:</p>
        <input type="text" v-model="username">
      </div>
      <div class="form-line">
        <p>请输入您的手机号:</p>
        <input type="number" v-model="telphone">
      </div>
      <div class="btns flex-horizon">
        <div class="btn" @click="submit">确定</div>
        <div class="btn" @click="cancel">取消</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  export default {
    name: 'result',
    props:{
      ruleDialogData:Object
    },
    data: function () {
      return {
        titles: [
          "恭喜您获得“举人”称号！你的历史是门卫教的吧！",
          "恭喜您获得“进士”称号！此次进京赶考，你顺利通过了“会试”，想中“探花”还得继续努力呀！",
          "恭喜您获得“探花”称号！一番苦工，终于获得了插花披红、进入杏园参加“探花宴”的资格，奋斗吧！",
          "恭喜您获得“榜眼”称号！距离霸主只有一步之遥，只要再做些题就行了！",
          "恭喜您获得“状元”称号！隐匿在人间有头脑的高智商人物，大哥带我开黑吧！"
        ],
        isShowInput: 0,
        username: '',
        telphone: ''
      }
    },
    computed: {
      rightCount(){
        return this.$store.state.test.rightnum
      },
      score(){
        return this.$store.state.test.score
      },
      title(){
        let index = 0;
        if(this.score < 51){
          index = 0
        }else if(this.score < 101){
          index = 1
        }else if(this.score < 151){
          index = 2
        }else if(this.score < 191){
          index = 3
        }else {
          index = 4
        }
        return this.titles[index]
      },
      isJoin(){
        return this.$store.state.test.isjoin
      }
    },
    mounted(){
      axios.get('/gxtest/getTest').then(res=>{
        console.log(res.data)
        this.$store.commit('setTest',res.data.test)
        this.$store.commit('setQuestions',res.data.questions)
      })
      axios.get('/gxtest/getUserInfo').then(res=>{
        this.$store.commit('setUserInfo',res.data)
        if (res.data === '') {
          window.location.href = '/gxtest/wxOauth?url=' + encodeURI(window.location.href)
        }
      })
    },
    methods:{
      showRule(){
        this.$store.commit("showRule")
      },
      clickContinue(){
        if(this.isJoin==0){
          this.$router.push({name:'cover'})
        }else{
          this.$store.commit('updateAlertData',{visible:1,text:'您已经参与过当期游戏,敬请期待下一期'})
        }

      },
      clickScoreCash(){
        if(this.$store.state.userinfo.name==null){
          this.isShowInput = 1
        }else{
          this.$router.push('prize')
        }
      },
      submit(){
        if(this.username == ''||this.telphone==''){
          this.$store.commit('updateAlertData',{visible:1,text:'请输入您的姓名和手机号'})
        }else{
          axios.get('/gxtest/updateUserInfo',{params:{name:this.username,telphone:this.telphone}}).then(res=>{
            if(res.data==0){
              this.$store.commit('updateUserInfo',{name:this.username,telphone:this.telphone})
              this.$router.push('prize')
            }else{
              this.$store.commit('updateAlertData',{visible:1,text:'提交失败,出现未知错误'})
            }
          })
        }
      },
      cancel(){
        this.isShowInput = 0
      }
    },
    components: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .page-result
    width 100vw
    min-height 100vh
    padding 10px
    background url("../assets/images/bg-image.jpg") no-repeat center center
    background-size 100% auto
    h2
      font-size 20px
    .question-title
      margin 10px 0
    .btns
      justify-content space-around
      .btn
        display: block
        padding 8px 20px
        color #fff
        border-radius 5px
        background: #1877cf
    .inputInfo
      position absolute
      background-color #fff
      padding 10px
      right 0
      left 0
      bottom 0
      top 0
      input
        width 100%
        border-radius 3px
        padding 4px
        border 1px solid #ccc
      .form-line
        margin 10px 0

</style>
